<template>
  <div>
    <van-nav-bar  fixed=true  placeholder=true title="我的" right-text="设置" @click-right="onClickRight" />
    <div class="user-poster">
      <van-image @click="loginOk" round width="10rem" height="10rem" fit="contain" :src="url" />
      <div style="font-size:25px">{{ name }}</div>
    </div>
    <van-row class="user-links">
      <van-col span="8" @click="wozudaode">
        <van-icon name="records" />
        我租到的
      </van-col>
      <van-col span="8" @click="woyijingchuzude">
        <van-icon name="records" />
        我已出租的
      </van-col>
      <van-col span="8" @click="woweichuzude">
        <van-icon name="records" />
        我未出租的
      </van-col>
    </van-row>
    <van-cell-group class="user-group">
      <van-cell icon="records" title="我的余额" is-link @click="editMyBalance" :value="balance" />
      <van-cell icon="points" title="待开发" is-link />
      <van-cell icon="gold-coin-o" title="待开发" is-link />
      <van-cell icon="smile-o" title="退出登录" is-link @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
import { Row, Col, Icon, Cell, CellGroup } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      url: "",
      uid:0,
      name: "",
      show: false,
      balance:"余额"
    };
  },
  created() {
    this.axios({
      method: "GET",
      url: "/aapi/gerenzhuye",
    })

      .then((response) => {
        this.url = response.data.url;
        this.name = response.data.name;
        this.uid = response.data.uid;
        this.balance = response.data.balance;
      })
      .catch((error) => {
        if (error.response.status === 401) {
          Toast.fail("未登录，请进行点击头像进行登录");
        }
      });
  },

  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  methods: {
    loginOk() {
      if (this.name == "") {
        this.$router.push("/login");
      }
    },

    onClickRight() {
      this.$router.push("/setting");
    },

    wozudaode() {
      if (this.name == "") {
        Toast.fail("未登录，请进行点击头像进行登录");
      } else {
        this.$router.push("/orderTotal");
      }
    },
    woyijingchuzude() {
      if (this.name == "") {
        Toast.fail("未登录，请进行点击头像进行登录");
      } else {
        this.$router.push("/productpage");
      }
    },
    woweichuzude() {
      if (this.name == "") {
        Toast.fail("未登录，请进行点击头像进行登录");
      } else {
        this.$router.push("/myfabu");
      }
    },
    editMyBalance() {
      if (this.name == "") {
        Toast.fail("未登录，请进行点击头像进行登录");
      } else {
        this.$store.commit("toBlanceId",this.uid)
        this.$store.commit("toBlanceBalance",this.balance)
        this.$router.push("/balance");
      }
    },

    logout() {
      this.axios({
        method: "POST",
        url: "/aapi/logout"
      })
          .then((response) => {
            this.$router.push("/login")
          })
    },
    wodefabu(){
      this.$router.push("/soldorders");
    }
  },
};
</script>

<style lang="less">
.user {
  &-poster {
    padding-top: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  &-group {
    padding-top: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  &-links {
    padding-top: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    text-align: center;

    .van-icon {
      display: block;
      font-size: 30px;
    }
  }
}
</style>
